<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <title>KISSY Check Tree</title>
    <link href="/kissy/build/css/dpl/base.css" rel="stylesheet"/>
    <link href="../../../../src/button/assets/dpl.css" rel="stylesheet"/>
    <link href="../../assets/dpl.css" rel="stylesheet"/>
</head>
<body>
<div class="container">


    <h1>KISSY Check Tree</h1>


    <a href="javascript:void(0)" id="expandAll" class="ks-button">展开全部</a>&nbsp;
    <a href="javascript:void(0)" id="collapseAll" class="ks-button">关闭全部</a>

    <div id="treeContainer" style="width: 200px;margin: 20px 0;">

    </div>
    <script src="/kissy/build/seed-debug.js"></script>
    <script src="/kissy/src/package.js"></script>
    <script>
        KISSY.use("tree,node", function (S, Tree,$) {
            var tree = new Tree.CheckTree({
                content: "淘宝网",

                expanded: true,
                // showRootNode:false,
                render: "#treeContainer"
            });

            var favorates = new Tree.CheckNode({

                content: "收藏夹",
                tree: tree
            });

            favorates.addChild(new Tree.CheckNode({

                content: "收藏的宝贝"
            }));

            favorates.addChild(new Tree.CheckNode({

                content: "收藏的店铺"
            }));

            tree.addChild(favorates);

            tree.addChild(new Tree.CheckNode({

                content: "我要买"
            }));


            var one = new Tree.CheckNode({

                content: "我的淘宝",
                tree: tree
            });

            one.addChild(new Tree.CheckNode({

                content: "已买到的宝贝"
            }));

            one.addChild(new Tree.CheckNode({

                content: "已卖出的宝贝"
            }));

            tree.addChild(one);

            tree.render();


            tree.on("click", function (e) {
                S.log("action : " + e.target.get("content"));
            });

            $("#expandAll").on("click", function () {
                tree.expandAll();
            });

            $("#collapseAll").on("click", function () {
                tree.collapseAll();
            });
        });
    </script>
</div>
</body>
</html>